﻿@page "/component/feedback/progress"

<Pager DataSource="@(new List<string>(new[] {
                         "Demo","Indicating","Hide Percent","Customize Value Text","Active","Disabled","State","Animation",
                         "Speed","Color","Inverted","Size","Attached","Multiple Bars"
                     }))">
    <Body>
        <Header1 Divider>
            Progress
            <SubHeader>A progress bar shows the progression of a task</SubHeader>
        </Header1>
        <PresentationPart Title="Demo">
            <Description>
                A standard progress bar
            </Description>
            <RunTemplate>
                <Progress Value="70"/>
               <Progress>
                    <Bar Value="80"/>
                </Progress>
                 <Progress>
                    <ChildContent>
                        <Bar Value="60"/>
                    </ChildContent>
                    <LabelContent>Uploading</LabelContent>
                </Progress>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress Value=""70""/>
<Progress>
    <Bar Value=""80""/>
</Progress>
<Progress>
    <ChildContent>
        <Bar Value=""60""/>
    </ChildContent>
    <LabelContent>Uploading</LabelContent>
</Progress>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Indicating">
            <Description>
                An indicating progress bar visually indicates the current level of progress of a task
            </Description>
            <RunTemplate>
                <Progress Value="percent" Indicating />
                <Button Disabled="disable" @onclick="Start">Start</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress Value=""100"" Indicating />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Show Percent Text">
            <RunTemplate>
                <Progress>
                    <Bar Value="70" ShowPercent/>
                </Progress>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress>
    <Bar Value=""70""/>
</Progress>
```
")
            </CodeTemplate>
        </PresentationPart>
       <PresentationPart Title="Customize Value Text">
           <Description>
               Use variable <code>context</code> in <code>Bar</code> component to get value of <code>Value</code><br />
               Note: Set <code>Context</code> as a different name of <code>context</code> if specified <code>Bar</code> component
               </Description>
            <RunTemplate>
                <Progress>
                    <Bar Value="80" >
                        Current @(context)%
                    </Bar>
                </Progress>
                <Progress>
                    <Bar Value="20" Centered>
                        Raimining @(100-context)%
                    </Bar>
                </Progress>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress Value=""40"">
    The percent is @context %
</Progress>
<Progress>
    <Bar Value=""80"">
        Current @(context)%
    </Bar>
</Progress>
<Progress>
    <Bar Value=""20"" Centered>
        Raimining @(100-context)%
    </Bar>
</Progress>
```
")
            </CodeTemplate>
        </PresentationPart>
         <PresentationPart Title="Active">
            <Description>
                A progress bar can show activity
            </Description>
            <RunTemplate>
                <Progress Value="40" Active/>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress Value=""40"" Active/>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Disabled">
            <Description>
                A progress bar can be disabled
            </Description>
            <RunTemplate>                
                <Progress Disabled>
                    <Bar Value="40"/>
                </Progress>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress Disabled>
    <Bar Value=""40""/>
</Progress>
```
")
            </CodeTemplate>
        </PresentationPart>
       <PresentationPart Title="State">
            <Description>
                A progress bar can show an state color
            </Description>
            <RunTemplate>
                <Progress State="State.Success">
                    <ChildContent>
                        <Bar Value="100" />
                    </ChildContent>
                    <LabelContent>Everything worked, your file is all ready.</LabelContent>
                </Progress>
                <Progress State="State.Warning" >
                    <ChildContent>
                        <Bar Value="100"/>
                    </ChildContent>
                    <LabelContent>Your file didn't meet the minimum resolution requirements.</LabelContent>
                </Progress>                
                <Progress State="State.Error">
                    <ChildContent>
                        <Bar Value="100" />
                    </ChildContent>
                    <LabelContent>There was an error.</LabelContent>
                </Progress>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress State=""State.Success"">
    <ChildContent>
        <Bar Value=""100"" />
    </ChildContent>
    <LabelContent>Everything worked, your file is all ready.</LabelContent>
</Progress>
<Progress State=""State.Warning"" >
    <ChildContent>
        <Bar Value=""100""/>
    </ChildContent>
    <LabelContent>Your file didn't meet the minimum resolution requirements.</LabelContent>
</Progress>                
<Progress State=""State.Error"">
    <ChildContent>
        <Bar Value=""100"" />
    </ChildContent>
    <LabelContent>There was an error.</LabelContent>
</Progress>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Animation">
            <Description>
                A progress bar can be shown in different animation style
            </Description>
            <RunTemplate>
                <Progress Value="100" Color="Color.Blue" Animation="Progress.AnimationType.Pulsate">
                    <LabelContent>Pulsate</LabelContent>
                </Progress>
                <Progress Value="100" Color="Color.Blue" Animation="Progress.AnimationType.Fill">
                    <LabelContent>Fill</LabelContent>
                </Progress>
                <Progress Value="100" Color="Color.Blue" Animation="Progress.AnimationType.Slide">
                    <LabelContent>Slide</LabelContent>
                </Progress>
                <Progress Value="100" Color="Color.Blue" Animation="Progress.AnimationType.Swing">
                    <LabelContent>Swing</LabelContent>
                </Progress>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress Color=""Color.Blue"" Animation=""Progress.AnimationType.Pulsate"">
    <LabelContent>Pulsate</LabelContent>
</Progress>
<Progress Color=""Color.Blue"" Animation=""Progress.AnimationType.Fill"">
    <LabelContent>Fill</LabelContent>
</Progress>
<Progress Color=""Color.Blue"" Animation=""Progress.AnimationType.Slide"">
    <LabelContent>Slide</LabelContent>
</Progress>
<Progress Color=""Color.Blue"" Animation=""Progress.AnimationType.Swing"">
    <LabelContent>Swing</LabelContent>
</Progress>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Speed">
            <Description>
                progress can also vary in speed
            </Description>
            <RunTemplate>
                <Progress Value="100" Color="Color.Blue" Animation="Progress.AnimationType.Pulsate" Speed="Speed.Fast">
                    <LabelContent>Fast</LabelContent>
                </Progress>
                <Progress Value="100" Color="Color.Blue" Animation="Progress.AnimationType.Pulsate" Speed="Speed.Slow">
                    <LabelContent>Slow</LabelContent>
                </Progress>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress Value=""100"" Color=""Color.Blue"" Animation=""Progress.AnimationType.Pulsate"" Speed=""Speed.Fast"">
    <LabelContent>Fast</LabelContent>
</Progress>
<Progress Value=""100"" Color=""Color.Blue"" Animation=""Progress.AnimationType.Pulsate"" Speed=""Speed.Slow"">
    <LabelContent>Slow</LabelContent>
</Progress>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Color">
            <Description>
                Can have different colors:
            </Description>
            <RunTemplate>
                <Progress Color="Color.Red" Value="95" />
                <Progress Color="Color.Green" Value="15" />
                <Progress Color="Color.Yellow" Value="76" />
                <Progress Color="Color.Pink" Value="35" />
                <Progress Color="Color.Olive" Value="66" />
                <Progress Color="Color.Orange" Value="28" />
                <Progress Color="Color.Black" Value="80" />
                <Progress Color="Color.Blue" Value="56" />
                <Progress Color="Color.Brown" Value="42" />
                <Progress Color="Color.Purple" Value="74" />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress Color=""Color.Red"" Value=""95""/>
<Progress Color=""Color.Green"" Value=""15""/>
<Progress Color=""Color.Yellow"" Value=""76""/>
<Progress Color=""Color.Pink"" Value=""35""/>
<Progress Color=""Color.Olive"" Value=""66""/>
<Progress Color=""Color.Orange"" Value=""28""/>
<Progress Color=""Color.Black"" Value=""80""/>
<Progress Color=""Color.Blue"" Value=""56""/>
<Progress Color=""Color.Brown"" Value=""42""/>
<Progress Color=""Color.Purple"" Value=""74""/>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Inverted">
            <Description>
                A progress bar can have its colors inverted
            </Description>
            <RunTemplate>
                <Segment Inverted>
                    <Progress Color="Color.Red" Value="95" Inverted />
                    <Progress Color="Color.Green" Value="15" Inverted />
                    <Progress Color="Color.Yellow" Value="76" Inverted />
                    <Progress Color="Color.Pink" Value="35" Inverted />
                    <Progress Color="Color.Olive" Value="66" Inverted />
                    <Progress Color="Color.Orange" Value="28" Inverted />
                    <Progress Color="Color.Black" Value="80" Inverted />
                    <Progress Color="Color.Blue" Value="56" Inverted />
                    <Progress Color="Color.Brown" Value="42" Inverted />
                    <Progress Color="Color.Purple" Value="74" Inverted />
                </Segment>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Segment Inverted>
    <Progress Color=""Color.Red"" Value=""95"" Inverted/>
    <Progress Color=""Color.Green"" Value=""15"" Inverted/>
    <Progress Color=""Color.Yellow"" Value=""76"" Inverted/>
    <Progress Color=""Color.Pink"" Value=""35"" Inverted/>
    <Progress Color=""Color.Olive"" Value=""66"" Inverted/>
    <Progress Color=""Color.Orange"" Value=""28"" Inverted/>
    <Progress Color=""Color.Black"" Value=""80"" Inverted/>
    <Progress Color=""Color.Blue"" Value=""56"" Inverted/>
    <Progress Color=""Color.Brown"" Value=""42"" Inverted/>
    <Progress Color=""Color.Purple"" Value=""74"" Inverted/>
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Size">
            <RunTemplate>
                <Progress Value="81" Size="Size.Mini" />
                <Progress Value="95" Size="Size.Tiny" />
                <Progress Value="43" Size="Size.Small" />
                <Progress Value="50" Size="Size.Medium" />
                <Progress Value="66" Size="Size.Large" />
                <Progress Value="37" Size="Size.Big" />
                <Progress Value="82" Size="Size.Huge" />
                <Progress Value="62" Size="Size.Massive" />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress Value=""81"" Size=""Size.Mini""/>
<Progress Value=""95"" Size=""Size.Tiny""/>
<Progress Value=""43"" Size=""Size.Small""/>
<Progress Value=""50"" Size=""Size.Medium""/>
<Progress Value=""66"" Size=""Size.Large""/>
<Progress Value=""37"" Size=""Size.Big""/>
<Progress Value=""82"" Size=""Size.Huge""/>
<Progress Value=""62"" Size=""Size.Massive""/>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Attached">
            <Description>
                A progress bar can show progress of an element
            </Description>
            <RunTemplate>
                <Segment>
                    <Progress Value="70" Attached AttachedVertical="VerticalPosition.Top" />
                    <p>
                        Nice to meet you!
                    </p>
                    <Progress Value="40" Attached AttachedVertical="VerticalPosition.Bottom" />
                </Segment>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Segment>
<Progress Value=""70"" Attached AttachedVertical=""VerticalPosition.Top""/>
<p>
Nice to meet you!
</p>
<Progress Value=""40"" Attached AttachedVertical=""VerticalPosition.Bottom""/>
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Multiple Bars">
            <Description>
                A progress element can have multiple bars.
                <Message State="State.Warning">
                    The sum value for each <code>Bar</code> component must not grater than 100.
                </Message>
            </Description>
            <RunTemplate>

                <Progress>
                    <Bar Value="30" Color="Color.Red" />
                    <Bar Value="20" Color="Color.Blue" />
                    <Bar Value="40" Color="Color.Green" />
                    <Bar Value="10" Color="Color.Yellow" />
                </Progress>
                <Progress>
                    <ChildContent>
                        <Bar Value="15" Color="Color.Red" Context="Bar1">VIP @(Bar1)%</Bar>
                        <Bar Value="55" Color="Color.Blue" ShowPercent="true" Centered />
                        <Bar Value="25" Color="Color.Green" Context="Bar2">Merged @(Bar2)%</Bar>
                        <Bar Value="5" Color="Color.Yellow" />
                    </ChildContent>
                    <LabelContent>
                        Tickets
                    </LabelContent>
                </Progress>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Progress>
    <Bar Value=""30"" Color=""Color.Red"" />
    <Bar Value=""20"" Color=""Color.Blue"" />
    <Bar Value=""40"" Color=""Color.Green"" />
    <Bar Value=""10"" Color=""Color.Yellow"" />
</Progress>
<Progress>
    <ChildContent>
        <Bar Value=""15"" Color=""Color.Red"" >VIP @(context)%</Bar>
        <Bar Value=""55"" Color=""Color.Blue"" ShowPercent=""true"" Centered/>
        <Bar Value=""25"" Color=""Color.Green"">Merged  @(context)%</Bar>
        <Bar Value=""5"" Color=""Color.Yellow"" />
    </ChildContent>
    <LabelContent>Tickets</LabelContent>
</Progress>
```
")
            </CodeTemplate>
        </PresentationPart>
    </Body>
</Pager>

@code {
    int percent;
    bool disable;
    System.Timers.Timer _timer;
    protected override void OnInitialized()
    {
        _timer = new System.Timers.Timer(60);
        _timer.Elapsed += async (s, e) =>
        {
            if (percent < 100)
            {
                percent++;
            }
            else
            {
                _timer.Stop();
                disable = false;
            }
            await InvokeAsync(StateHasChanged);
        };
    }

    void Start()
    {
        percent = 0;
        disable = true;
        _timer.Start();
    }
}